<template>
    <div>
        <div class="top_background">
            <img src="../../images/left.png" alt="" onClick="javascript :history.back(-1);">
            <div class="top_table">
                <span @click="fengyun" :class="cliend==1?'active':''">风云榜</span>
                <span @click="shoutu" :class="cliend==2?'active':''">收徒榜</span>
            </div>
        </div>
        <div class="asions_list">
            <div class="rankings">
                <span @click="all_rank" :class="cliend_rank==1?'active':''">总排行</span>
                <span @click="monuth_rank" :class="cliend_rank==2?'active':''">月排行</span>
            </div>
            <ul v-if="cliend==2" class="shoutu_num">
                <li>名次</li>
                <li>昵称</li>
                <li>收徒数</li>
                <li>收徒收益</li>
            </ul>
            <ul v-if="cliend==1">
                <li>名次</li>
                <li>昵称</li>
                <li>总收益</li>
            </ul>
        </div>
        <!--前三名-->
        <div class="shunf">
            <div class="top_three">
                <ul>
                    <li v-for="(arr,index) in newthress">
                        <img src="../../img_myself/num_1.png" alt="" v-if="index == 0">
                        <img src="../../img_myself/num_2.png" alt="" v-if="index == 1">
                        <img src="../../img_myself/num_3.png" alt="" v-if="index == 2">
                        <span>{{arr.user_nickname}}</span>
                        <div v-if="cliend==2">{{ arr.total_prentice }}</div>
                        <p><span>{{arr.money}}</span></p>
                    </li>
                    <li v-for="(arr,index) in arrs">
                        <div class="shunf_w">{{index+4}}</div>
                        <span>{{arr.user_nickname}}</span>
                        <div v-if="cliend==2">{{ arr.total_prentice }}</div>
                        <p><span>{{arr.money}}</span></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import api from '../../utils/api';

    export default {
        name: "Rankinglist",
        data: () => ({
            cliend: 1, //标识，判断是否是收徒榜，还是风云榜;默认风云榜shuoge
            cliend_rank: 1,//标识，判断是否是总排行，月排行
            arrs: [],
            newthress: [],
            url: '/earningsRank'
        }),
        mounted() {
            document.body.scrollTop = 0;
            this.datas(this.cliend_rank)
        },
        methods: {
            shoutu: function () {
                this.cliend = 2
            },
            fengyun: function () {
                this.cliend = 1
            },
            monuth_rank: function () {
                this.cliend_rank = 2
            },
            all_rank: function () {
                this.cliend_rank = 1
            },
            async datas(type) {
                var that = this;
                await api.request(this.url, 'get', {type: type}).then(function (res) {
                    that.arrs = res.data.data;
                    that.newthress = that.arrs.splice(0, 3)
                })
            }
        },
        watch: {
            cliend_rank(type) {
                this.datas(type)
            },
            async cliend(type) {
                if(type == 1){
                    this.url = '/earningsRank';
                }else {
                    this.url = '/prenticeRank';
                }
                this.datas(this.cliend_rank)
            }
        }
    }
</script>

<style scoped="css">
    @import "../../style/rankinglist.css";
</style>
